<template>
    <basic-container>
        <el-form ref="queryForm"
                 :model="queryParams"
                 :inline="true"
                 label-width="80px">
            <el-form-item label="登录账号"
                          prop="searchParams.userName">
                <el-input v-model="queryParams.searchParams.search_eq_userName"
                          placeholder="请输入登录账号"/>
            </el-form-item>
            <el-form-item label="登录地址"
                          prop="searchParams.ipaddr">
                <el-input v-model="queryParams.searchParams.search_eq_ipaddr"
                          placeholder="请输入登录地址"/>
            </el-form-item>
            <el-form-item label="登录时间"
                          prop="searchParams.search_dt_between_loginTime">
                <el-date-picker
                        v-model="queryParams.searchParams.search_dt_between_loginTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions2">
                </el-date-picker>

            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           icon="el-icon-search"
                           size="mini"
                           @click="handleQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh"
                           size="mini"
                           @click="resetQuery">重置
                </el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10"
                class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        :disabled="multiple"
                        @click="handleDelete"
                >删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        @click="handleDeleteAll"
                >清空
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="warning"
                        icon="el-icon-download"
                        size="mini"
                >导出
                </el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading"
                  :data="userList"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="ID" align="center" prop="id"/>
            <el-table-column label="登录账号" align="center" prop="userName"/>
            <el-table-column label="访问地址" align="center" prop="ipaddr"/>
            <el-table-column label="访问地点" align="center" prop="loginLocation"/>
            <el-table-column label="浏览器" align="center" prop="browser"/>
            <el-table-column label="操作系统" align="center" prop="os"/>
            <el-table-column label="操作信息" align="center" prop="msg"/>
            <el-table-column label="登录时间" align="center" :formatter="dFormat">
            </el-table-column>
        </el-table>
        <pagination v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"/>

    </basic-container>
</template>

<script>
    import {
        delLoginLog,
        delAllLoginLog,
        listLoginLog,
    } from "@/api/monitor/login";
    import {dateFormat} from '@/util/date'

    export default {
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 总条数
                total: 0,
                // 用户信息表格数据
                userList: [],
                statusOptions: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    searchParams: {
                        search_eq_userName: undefined,
                        search_eq_ipaddr: undefined,
                        search_dt_between_loginTime: undefined,
                    }

                },
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }

        },
        created() {
            this.getList();
        },
        methods: {
            /** 搜索按钮操作 */
            handleQuery() {
                for (let key in this.queryParams.searchParams) {
                    if(this.queryParams.searchParams[key]!=undefined){
                        if (this.queryParams.searchParams[key] == "") {
                            this.queryParams.searchParams[key] = undefined;
                            continue;
                        }
                        if(this.queryParams.searchParams[key].length>0){
                            if(!this.queryParams.searchParams[key].constructor == Array){
                                if(!(this.queryParams.searchParams[key].replace(" ", "").trim().length > 0)){
                                    this.queryParams.searchParams[key] = undefined;
                                    continue;
                                }
                            }
                        }
                    }
                }
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            /** 查询收费员信息列表 */
            getList() {
                this.loading = true;
                listLoginLog(this.queryParams).then(response => {
                    const data = response.data;
                    if (response.status === 200 && data.code === "00") {
                        this.userList = data.data.rows;
                        this.total = data.data.total;
                    } else {
                        this.msgError(data.msg);
                    }
                    this.loading = false;
                });
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                // this.ids = selection.map(item => item.id)
                this.ids = selection;
                this.single = selection.length != 1;
                this.multiple = !selection.length;
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const userIds = row.id || this.ids;
                let tt = '';
                if (row.id == undefined) {
                    tt = '是否确认删除【' + this.ids.length + '】条数据吗?';
                } else {
                    tt = '是否确认删除为"' + row.name + '"的数据项?';
                }
                this.$confirm(tt, "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delLoginLog(userIds);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                }).catch(function () {
                });
            },
            /** 删除按钮操作 */
            handleDeleteAll() {
                this.$confirm('是否确认清空所以的数据?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delAllLoginLog();
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                }).catch(function () {
                });
            },
            dFormat(row) {
                if (row.loginTime == null) {
                    return "/";
                }
                return dateFormat(new Date(row.loginTime));
            }
        }
    };
</script>

<style>

</style>
